<template>
  <div style="padding: 20px 40px">
    <div v-loading="loading" style="padding: 15px 30px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          width="300"
          label="会员信息"
        >
          <template slot-scope="scope">
            <div class="dis disAl">
              <img :src="scope.row.avatar" style="width: 30px;height: 30px;">
              {{ scope.row.name }}
              {{ scope.row.mobile }}
            </div>

          </template>
        </el-table-column>
        <el-table-column
          prop="card_name"
          label="惩罚开始日期"
        />
        <el-table-column
          prop="cardnum"
          label="会员姓名"
        />
        <el-table-column
          prop="deduction_money"
          label="联系方式"
        />
        <el-table-column
          prop="balance"
          label="卡号"
        />
        <el-table-column
          prop="balance"
          label="有效期至"
        />
        <el-table-column
          prop="balance"
          label="余额"
        />
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="300"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="yh_dis dis" style="justify-content: center">
              <div class="yh_dis" style="align-items: center; margin-right: 10px">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />取消预约
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="dis" style=" margin-top: 20px;justify-content: center">
        <div style="margin-top: 8px">共0条记录，每页10条</div>
        <el-pagination
          :current-page.sync="listQuery.page"
          :page-size="15"
          layout="prev, pager, next, jumper"
          :total="listQuery.limit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 0
      },
      currentRole: 'adminDashboard',
      loading: false,
      // 预约
      tableData: [],
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
    this.$store.dispatch('user/changeXuan', { key: 'xuanList', value: [
      { name: '团课预约记录', url: '/dashboard', pd: true },
      { name: '私教预约记录', url: '/privateappointment', pd: true },
      { name: '爽约惩罚', url: '/punishment', pd: true },
      { name: '储物柜', url: '/locker',pd: true },
      { name: '请假管理', url: '/leavemanage', pd: true },
      { name: '班课上课记录', url: '/classrecord', pd: true }
    ] })
    this.$store.dispatch('user/changeXuan', { key: 'xuan', value: 2 })
    this.gettime()
    var check = localStorage.getItem('check')
    if (check) {
      var list = check.split(',')
      this.check = list.map(Number)
    }
    this.timeCreated()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    gettime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      this.todayatime = day
      this.daytime = year + '-' + month + '-' + day
    }
  }
}
</script>
<style>
.yh_dis{
  cursor: pointer;
}
</style>
